form {
    @include shadow-low;

    padding: 1em;
}

fieldset {
    border-radius: 4px;
    margin: .5em 0;

    legend {
        font-weight: 700;
        padding: 0 .2em;
    }
}

input,
button,
textarea,
select {
    background-color: $white;
    border: 1px solid $color-border;
    border-radius: 3px;
    height: 2.2em;
    outline: 0;
    padding: 5px;
    width: 100%;

    &:hover {
        border: 1px solid darken($color-border, 10%);
    }

    &:focus {
        border: 1px solid darken($color-border, 25%);
    }
}

textarea {
    height: auto;
    resize: vertical;
}

[type="color"] {
    padding: 2px;
}

[type="range"] {
    -webkit-appearance: none;

    &::-webkit-slider-thumb {
        @include shadow-low;

        -webkit-appearance: none;
        background-color: $white;
        border: 1px solid $color-border;
        border-radius: 3px;
        cursor: pointer;
        height: 1.3em;
        width: 10px;
    }

    &::-moz-range-thumb {
        @include shadow-low;

        -webkit-appearance: none;
        background-color: $white;
        border: 1px solid $color-border;
        border-radius: 3px;
        cursor: pointer;
        height: 2em;
        margin-top: -1em;
        width: 10px;
    }

    &::-ms-thumb {
        @include shadow-low;

        -webkit-appearance: none;
        background-color: $white;
        border: 1px solid $color-border;
        border-radius: 3px;
        cursor: pointer;
        height: 2em;
        margin-top: -1em;
        width: 10px;
    }

    &::-webkit-slider-runnable-track {
        // Black pixel
        background-image: url();
        background-position: left .6em;
        background-repeat: repeat-x;
    }

    &::-moz-range-track {
        // Black pixel
        background-image: url();
        background-position: left .6em;
        background-repeat: repeat-x;
    }

    &::-ms-track {
        background: transparent;
        // Black pixel
        background-image: url();
        background-position: left .6em;
        background-repeat: repeat-x;
        border-color: transparent;
        color: transparent;
        cursor: pointer;
        width: 100%;
    }
}

[type="checkbox"],
[type="radio"],
[type="reset"],
[type="button"],
[type="submit"],
button {
    cursor: pointer;
    height: auto;
    width: auto;
}

label {
    cursor: pointer;
}

.toggle {
    cursor: pointer;
    position: relative;
    vertical-align: text-top;

    &::before {
        background-color: $color-toggle-off;
        border-radius: 3px;
        content: ' ';
        display: inline-block;
        height: 16px;
        transition: background 300ms;
        width: 32px;
    }

    &::after {
        background-color: $white;
        border: 1px solid $color-border;
        border-radius: 2px;
        content: ' ';
        display: inline-block;
        height: 20px;
        left: 0;
        position: absolute;
        top: -3px;
        transition: transform 150ms;
        width: 16px;
    }
}

.hidden:checked + .toggle {
    &::before {
        background-color: $color-toggle-on;
    }

    &::after {
        transform: translate(16px);
    }
}

[type="checkbox"].custom,
[type="radio"].custom {
    left: -9999px;
    position: absolute;

    + .custom-target {
        background-color: $white;
        border: 2px solid $color-primary;
        cursor: pointer;
        display: inline-block;
        line-height: .8;
        position: relative;
    }

    &:disabled + .custom-target {
        background-color: lighten($color-disabled, 30%);
        border-color: lighten($color-disabled, 15%);

        &::after {
            color: $color-disabled;
        }
    }

    + .custom-target::after {
        color: $color-secondary;
        transition: opacity .3s ease;
    }

    &:not(:checked) + .custom-target::after {
        opacity: 0;
    }
}

[type="checkbox"].custom {
    + .custom-target {
        border-radius: 3px;
    }

    + .custom-target::after {
        content: '✔';
    }
}

[type="radio"].custom {
    + .custom-target {
        border-radius: 100%;
        height: 1.1em;
        width: 1.1em;
    }

    + .custom-target::after {
        content: '●';
    }
}
